<style>
.user_container{
    height: 100px;
    padding:15px;
    color: #666666;
}

.user_container .col-md-1,.user_container .col-md-2{
    height: 50px;
    color: #34847e;
}

.user_container .user_search:hover{
    cursor: pointer;
}
.user_container .user_search{
    line-height: 35px;
}
.user_container .btn-primary{
    color:#fff;
    background-color: #2cb5ac;
    font-size: 12px;
}
.user_container table td span:hover{
    cursor: pointer;
}

.user_container .modal label{
    color: #2cb5ac;
}
#exampleModal2 .form-group div{
    margin-bottom: 0px;
    margin-left: 80px;
    line-height: 36px;
}
</style>

<div class="user_container">
<div class="row">
    <div class="col-md-1">
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            添加
        </button>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"  style="border: none;">
            <h4 class="modal-title" id="exampleModalLabel" style="float: left;">添加用户</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label"><span style="color: red;">*</span> 用户名</label>
                    <div class="col-sm-10">
                    <input type="email" class="form-control" id="inputEmail3" name="username">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label"><span style="color: red;">*</span> 姓名</label>
                    <div class="col-sm-10">
                    <input type="text"  class="form-control" id="inputPassword3" name="realname">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label"><span style="color: red;">*</span> 密码</label>
                    <div class="col-sm-10">
                    <input type="password" class="form-control" id="inputPassword3" name="password">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-10">
                    <div class="radio">
                    <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="male" checked>男
                    </label> &nbsp;&nbsp;
                    <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="female">
                    女
                    </label>
                    </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">手机号</label>
                    <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputPassword3">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">出生日期</label>
                    <div class="col-sm-10">
                    <input type="date" class="form-control" id="inputPassword3" placeholder="请输入日期">
                    </div>
                </div>
                </form>
            </div>
            <div class="modal-footer"  style="border-top: none;">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" id="save">确定</button>
            </div>
        </div>
        </div>
    </div>
<!-- Modal -->
<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header"  style="border: none;">
        <h4 class="modal-title" id="exampleModalLabel" style="float: left;">添加用户</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
            <form class="form-horizontal">
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label"><span style="color: red;">*</span> 用户名</label>
                <div class="col-sm-10">
                <input type="email" class="form-control" id="inputEmail3" name="username">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label"><span style="color: red;">*</span> 姓名</label>
                <div class="col-sm-10">
                <input type="text"  class="form-control" id="inputPassword3" name="realname">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label"><span style="color: red;">*</span> 密码</label>
                <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword3" name="password">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">性别</label>
                <div class="col-sm-10">
                <div class="radio">
                <label>
                <input type="radio" name="optionsRadios" id="optionsRadios1" value="male" checked>男
                </label> &nbsp;&nbsp;
                <label>
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="female">
                女
                </label>
                </div>
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">手机号</label>
                <div class="col-sm-10">
                <input type="text" class="form-control" id="inputPassword3">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">出生日期</label>
                <div class="col-sm-10">
                <input type="date" class="form-control" id="inputPassword3" placeholder="请输入日期">
                </div>
            </div>
            </form>
        </div>
        <div class="modal-footer"  style="border-top: none;">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="save1">确定</button>
        </div>
    </div>
    </div>
</div>
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header"  style="border: none;">
        <h4 class="modal-title" id="exampleModalLabel" style="float: left;">设置角色</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
            <form class="form-horizontal">
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">用户名
                </label> 
                <div>
                </div>    
            </div>
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">角色
                </label> 
                <div>
                    <select class="juese">
                        <option class="val">请选择角色</option>   
                    </select>
                </div>
                    
            </div>
            </form>
        </div>
        <div class="modal-footer"  style="border-top: none;">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="save2">确定</button>
        </div>
    </div>
    </div>
</div>
    <div class="col-md-2">
            <input type="text" class="form-control user_search_text" id="exampleInputName2" placeholder="请输入用户名">
    </div>
    <div class="col-md-2">
        <select class="form-control user_search_text" style="color:#b2b2b2;">
        <option class="val">请选择角色</option>
        </select>
    </div>
    <div class="col-md-1 user_search">
        搜索
    </div>
</div>
<div class="row">
    <table class="table table-hover">
        <thead>
            <th>序号</th>
            <th>用户名</th>
            <th>姓名</th>
            <th>角色</th>
            <th>性别</th>
            <th>状态</th>
            <th style="width: 400px;">手机号</th>
            <th>操作</th>
        </thead>
        <tbody>
            <!-- <tr>
                <td>1</td>
                <td>usernaem</td>
                <td>name</td>
                <td>role</td>
                <td>gender</td>
                <td>status</td>
                <td>18777772222</td>
                <td>
                    <span>设置</span>
                    <span>移出</span>
                    <span>详情</span>
                    <span>修改</span>
                </td>
            </tr> -->
            
        </tbody>
    </table>
</div>
<div class="row">
    <nav aria-label="Page navigation">
    <ul class="pagination">
        <li class="num" id="left_arrows" val='0'>
        <a href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
        </a>
        </li>
        <!-- <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li> -->
        <li id="right_arrows">
        <a href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
        </a>
        </li>
    </ul>
    </nav>
</div>
</div>

<script type="text/javascript">
    //声明全局变量baseUrl、currentPage、
    var baseUrl="http://39.96.74.136:7788/";
    var currentPage=1;
    var pageSize=10;
    var i=0;
    
    //通过promise封装请求函数、
    function getData(type,url){
        var p=new Promise((resolve,reject)=>{
            //执行异步请求
            $.ajax({
                url:url,
                type:type,
                headers:{
                    "Authorization":sessionStorage.getItem("token")
                },
                success:function(data){
                    //成功后接受data对象返回 =>p
                    resolve(data);
                    // console.log(data);
                }
            });
        });
        return p;
    }

    //1.发送请求-请求角色信息
    getData("get",baseUrl+"role/findAll").then(function(data){
        //数据处理
		data.data.forEach((item)=>{
			$(".user_container .val").after("<option>"+item.name+"</option>");
		});
    });

    //封装用户数据处理函数
    function getUserData(url){

        //2.请求所有用户数据-根据分页
        return getData("get",baseUrl+url).then(function(data){

            //清空所有分页按钮
            if($(".clicknum").length>0){
                $(".clicknum").remove();
            }

            //跟据用户total设置分页按钮个数
            var num=Math.ceil((data.data.total)/pageSize)
            for(var i=num;i>0;i--){
                $(".user_container .num").after(`<li class='clicknum'><a href="#">`+i+`</a></li>`)
            }

            // 给分页按钮绑定事件
            $('.clicknum').click((event)=>{
                currentPage=$(event.target).text();
                // console.log(currentPage);
                getUserData('baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize,currentPage);                  
            })
            $('#left_arrows').unbind('click').click(function(){
                //判断前面是否还有页面
                if(currentPage>1){
                    currentPage=currentPage-1;
                    getUserData('baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize,currentPage);                             
                }               
            })
            //给右箭头绑定事件
            $('#right_arrows').unbind('click').click(function(){
                //判断后面是否还有页面
                if(currentPage<num){
                    currentPage=currentPage+1;
                    getUserData('baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize,currentPage);                             
                }               
            })
           

            //先清空所有tbody元素
		    $(".user_container tbody").empty();

            //根据用户数量创建tr ——> 追加到tbody
            data.data.list.forEach((item)=>{
                $(".user_container tbody").append(`<tr>
                    <td>`+item.id+`</td>
                    <td>`+item.username+`</td>
                    <td>`+item.realname+`</td>
                    <td>`+item.politicsStatus+`</td>
                    <td>`+item.gender+`</td>
                    <td>`+item.status+`</td>
                    <td>`+item.telephone+`</td>
                    <td style='display:none'>`+item.password+`</td>
                    <td>
                        <span class="shezhi">设置</span>
                        <span class="deleteById">移除</span>
                        <span class="details">详情</span>
                        <span class="xiugai">修改</span>
                    </td>
                    </tr>`);
            });

            //给设置按钮绑定事件
            $('.shezhi').click(()=>{
                $('#exampleModal2').modal('show');
                var id=$(event.target).parent().parent().children().eq(0).text();
                $('#exampleModal2 .form-group div').eq(0).text(id);
               
                $('#save2').unbind('click').click(()=>{
                    var rolename=$(".juese").eq(0).val();
                    var roles;
                    console.log(rolename)
                    if(rolename=='请选择'){
                        $('#exampleModal2').modal('hide');
                    }else if(rolename!='请选择'){
                        if(rolename=='教师'){
                             roles=1;
                        }else if(rolename=='管理员'){
                             roles=2;
                        }else{
                            roles=6;
                        }
                        getData("post",baseUrl+'baseUser/setRoles?roles='+roles+'&id='+id).then(function(data){
                            if(data.status==200){
                                //刷新页面
                                alert(data.message);
                                
                                //刷新页面
                                getUserData('baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize,currentPage);
                                $('#exampleModal2').modal('hide');
                            }
                        })
                    }
                })
            })
            //给详情按钮绑定事件
            $(".details").click(()=>{
                //页面跳转
                $('.content-main').load('./pages/user.html');
                $('.header-title').text('个人信息');
                $('.container-left li').removeClass('current');
                $('.container-left .fa-star').parent().addClass('current');
            });

            //给删除按钮绑定事件
            $(".deleteById").click(()=>{
                //获取id
                var id=$(event.target).parent().parent().children().eq(0).text();
                console.log(id);
                
                var i=confirm('确认删除？')        
                if(i==true){
                getData("get",baseUrl+'baseUser/deleteById?id='+id).then(function(data){
                    if(data.status==200){
                        alert(data.message);
                        //刷新页面
                        getUserData('baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize,currentPage);
                        }
                    })
                }
                    
            });

            //给修改按钮绑定事件
            $(".xiugai").click(()=>{
                $('#exampleModal1').modal('show');
                //获取id
                var id=$(event.target).parent().parent().children().eq(0).text();
                console.log(id)
                var username1=$(event.target).parent().parent().children().eq(1).text();
                var realname1=$(event.target).parent().parent().children().eq(2).text();
                var password1=$(event.target).parent().parent().children().eq(7).text();
                var telephone1=$(event.target).parent().parent().children().eq(6).text();

                var gender1=$(event.target).parent().parent().children().eq(4).text();
                if(gender1=='female'){
                    $('.radio input:radio:last').attr('checked', 'checked');
                }else{
                    $('.radio input:radio:first').attr('checked', 'checked');
                }
                $('#exampleModal1 .modal-body input').eq(0).val(username1);
                $('#exampleModal1 .modal-body input').eq(1).val(realname1);
                $('#exampleModal1 .modal-body input').eq(2).val(password1);
                $('#exampleModal1 .modal-body input').eq(5).val(telephone1);

                $('#save1').unbind('click').click(()=>{
                    //获取相应的数据     
                    var username=$('#exampleModal1 .modal-body input').eq(0).val();
                    var realname=$('#exampleModal1 .modal-body input').eq(1).val();
                    var password=$('#exampleModal1 .modal-body input').eq(2).val();
                    var gender=$("#exampleModal1 .modal-body .radio input[name='optionsRadios']:checked").val();
                    var telephone=$('#exampleModal1 .modal-body input').eq(5).val();
                    var birth=$('#exampleModal1 .modal-body input').eq(6).val();
                    var birth1=Number(birth.replace(/[-]/g,""));
                    if(id!=null){
                        getData("post",baseUrl+'baseUser/saveOrUpdate?id='+id+'&username='+username+'&password='+password+'&telephone='+telephone+'&realname='+realname+'&gender='+gender+'&birth='+birth1+'&status=正常').then(function(data){
                            if(data.status==200){
                                //刷新页面
                                alert(data.message);
                                //刷新页面
                                getUserData('baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize,currentPage);
                                $('#exampleModal1').modal('hide');
                            }
                        })
                    }
                })
                      
            })

            // 点击新增按钮，弹出模态框
            // $('.btn-primary').click(function(){
            //     $('#exampleModal').modal('show');
            // })
            
            
        });
        
    }

    getUserData('baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize);

    //3.给搜索按钮绑定事件
    $(".user_search").click(()=>{
        // <1>、获取用户数据
        username=$(".user_search_text").eq(0).val();
        rolename=$(".user_search_text").eq(1).val();

        // <2>、判断用户输入
        if(username!='' && rolename=='请选择角色'){
            url='baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize+'&username='+username;
        }else if(username=='' && rolename!='请选择角色'){
            url='baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize+'&rolename='+rolename;
        }else if(username!='' && rolename!="请选择角色"){
		    url='baseUser/pageQuery?page='+currentPage+'&pageSize='+paseSize+'&username='+username+'&rolename='+rolename;
        }else{
            url='baseUser/pageQuery?page='+currentPage+'&pageSize='+paseSize;
        }

        //<3>、发送请求
            getUserData(url);
            
    });
    //添加数据
    $("#save").click(()=>{
        //获取相应的数据
        var username=$('#exampleModal .modal-body input').eq(0).val();
        var realname=$('#exampleModal .modal-body input').eq(1).val();
        var password=$('#exampleModal .modal-body input').eq(2).val();
        var gender=$("#exampleModal .modal-body .radio input[name='optionsRadios']:checked").val();
        var telephone=$('#exampleModal .modal-body input').eq(5).val();
        console.log(gender)
        var birth=$('#exampleModal .modal-body input').eq(6).val();
        var birth1=Number(birth.replace(/[-]/g,""));
        
        if(username!=null&&realname!=null&&password!==null&&gender!=null){
            getData("post",baseUrl+'baseUser/saveOrUpdate?username='+username+'&password='+password+'&telephone='+telephone+'&realname='+realname+'&gender='+gender+'&birth='+birth1).then(function(data){
            $('#exampleModal .modal-body input').val('');
            $("#exampleModal .modal-body .radio input[name='optionsRadios']:checked").val('')
            if(data.status==200){
                //刷新页面
                getUserData('baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize,currentPage);
                $('#exampleModal').modal('hide');
                }
            }) 
    }
                
    })
</script>